<nav class="flex p-4">
    <ol class="inline-flex items-center space-x-1 md:space-x-3">
      <li class="inline-flex items-center text-xl">
        <a [routerLink]="'/indicator/market'">
            {{ 'PAC.INDICATOR.VIEWER.MARKET' | translate: {Default: "Market"} }}
        </a>
      </li>
      <li>
        <div class="flex items-center">
            <svg aria-hidden="true" class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
            <span class="ml-1 text-base font-medium text-gray-500 md:ml-2 dark:text-gray-400">{{indicator()?.businessArea?.name ?? '未分配'}}</span>
        </div>
      </li>
    
      <li aria-current="indicator">
        <div class="flex items-center">
            <svg aria-hidden="true" class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          <span class="ml-1 text-base font-medium text-gray-500 md:ml-2 dark:text-gray-400">{{ indicator()?.name }}</span>
        </div>
      </li>
    </ol>
</nav>

<div *ngIf="indicator() as indicator" class="flex-1 px-8 py-4 flex flex-col gap-4 overflow-auto">
    <mat-card class="p-4 flex gap-4 text-lg">
        <div class="flex gap-4 text-lg">
            <div class="text-right">
                {{ 'PAC.INDICATOR.REGISTER.NAME' | translate }}:
            </div>
            <div class="font-bold">
                {{indicator.name}}
            </div>
        </div>

        <div class="flex gap-4 text-lg">
            <div class="text-right">
                {{ 'PAC.INDICATOR.REGISTER.Code' | translate: {Default: 'Code'} }}:
            </div>
            <div class="italic">
                <span class="font-mono">{{indicator.code}}</span>
            </div>
        </div>
    </mat-card>

    <mat-card class="">
        <mat-card-header>
            <mat-card-title>{{ 'PAC.INDICATOR.VIEWER.BASIC_INFORMATION' | translate: {Default: 'Basic information'} }}</mat-card-title>
        </mat-card-header>

        <mat-card-content>
            <div class="flex-1 grid grid-cols-4 gap-4">
                <div class="text-right">
                    {{ 'PAC.INDICATOR.REGISTER.BUSINESS_AREA' | translate }}:
                </div>
                <div class="col-span-3">
                    {{indicator.businessArea?.name}}
                </div>
    
                <div class="text-right">
                    {{ 'PAC.INDICATOR.REGISTER.UNIT' | translate }}:
                </div>
                <div class="col-span-3">
                    {{indicator.unit}}
                </div>
    
                <div class="text-right">
                    {{ 'PAC.INDICATOR.REGISTER.CREATED_BY' | translate }}:
                </div>
                <div class="col-span-3">
                    {{indicator.createdBy | createdBy}}
                </div>
    
                <div class="text-right">
                    {{ 'PAC.INDICATOR.REGISTER.PRINCIPAL' | translate }}:
                </div>
                <div class="col-span-3">
                    {{indicator.principal}}
                </div>
    
                <div class="text-right">
                    {{ 'PAC.INDICATOR.REGISTER.Certification' | translate: {Default: 'Certification'} }}:
                </div>
                <div class="col-span-3">
                  @if (indicator.certification) {
                    <span class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 bg-green-200 text-green-700 rounded-full">
                        {{indicator.certification.name}}
                    </span>
                  }
                </div>
    
                <div class="text-right">
                    {{ 'PAC.INDICATOR.REGISTER.VALIDITY' | translate }}:
                </div>
                <div class="col-span-3">
                    {{indicator.validity}}
                </div>
    
                <div class="text-right flex justify-end items-center">
                    {{ 'PAC.INDICATOR.REGISTER.STATUS' | translate: {Default: 'Status'} }}:
                </div>
                <div class="col-span-3">
                    <mat-checkbox [ngModel]="indicator.isActive" disabled></mat-checkbox>
                </div>
    
                <div class="text-right flex justify-end items-center">
                    {{ 'PAC.INDICATOR.REGISTER.Visible' | translate: {Default: 'Visible'} }}:
                </div>
                <div class="col-span-3">
                    <mat-checkbox [ngModel]="indicator.visible" disabled></mat-checkbox>
                </div>
    
                <div class="text-right">
                    {{ 'PAC.INDICATOR.REGISTER.Tags' | translate: {Default: 'Tags'} }}:
                </div>
                <div class="col-span-3">
                    <pac-tags [tags]="indicator.tags"></pac-tags>
                </div>
    
                <div class="text-right">
                    {{ 'PAC.INDICATOR.REGISTER.BUSINESS' | translate }}:
                </div>
                <div class="col-span-3 whitespace-pre-wrap">
                    {{indicator.business}}
                </div>
                    
            </div>
        </mat-card-content>
    </mat-card>

    <mat-card class="">
        <mat-card-header>
            <mat-card-title>{{ 'PAC.INDICATOR.VIEWER.MODEL_INFORMATION' | translate: {Default: 'Model information'} }}</mat-card-title>
        </mat-card-header>

        <mat-card-content>
            <div class="flex-1 grid grid-cols-4 gap-4">
                <div class="text-right">
                    {{ 'PAC.INDICATOR.REGISTER.MODEL' | translate }}:
                </div>
                <div class="col-span-3">
                    <a [routerLink]="['/models', indicator.modelId]">{{indicator.model?.name || indicator.modelId}}</a>
                </div>

                <div class="text-right">
                    {{ 'PAC.INDICATOR.REGISTER.ENTITY' | translate }}:
                </div>
                <div class="col-span-3">
                    {{indicator.entity}}
                </div>

                <div class="text-right">
                    {{ 'PAC.INDICATOR.REGISTER.TYPE' | translate }}:
                </div>
                <div class="col-span-3">
                    <pac-indicator-type [indicator]="indicator"></pac-indicator-type>
                </div>

                <div class="text-right">
                    {{ 'PAC.INDICATOR.REGISTER.MEASURE' | translate }}:
                </div>
                <div class="col-span-3">
                    {{indicator.options?.measure}}
                </div>

                <div class="text-right">
                    {{ 'PAC.INDICATOR.REGISTER.Aggregator' | translate: {Default: 'Aggregator'} }}:
                </div>
                <div class="col-span-3">
                    {{indicator.options?.aggregator}}
                </div>

                <div class="text-right">
                    {{ 'PAC.INDICATOR.REGISTER.FORMULA' | translate }}:
                </div>
                <div class="col-span-3">
                    <pre class="whitespace-pre-wrap text-sm font-bold font-mono text-ellipsis overflow-hidden p-4 rounded-xl
                        bg-black/5 dark:bg-white/10">{{indicator.options?.formula}}</pre>
                </div>

                <div class="text-right">
                    {{ 'PAC.INDICATOR.REGISTER.DIMENSIONS' | translate }}:
                </div>
                <div class="col-span-3">
                    {{indicator.options?.dimensions}}
                </div>

                <div class="text-right">
                    {{ 'PAC.INDICATOR.REGISTER.FILTERS' | translate }}:
                </div>
                <div class="col-span-3">
                    <ngm-slicers [slicers]="indicator.options?.filters" [limit]="5"></ngm-slicers>
                </div>
            </div>
        </mat-card-content>
    </mat-card>
</div>
